<template>
	<view>
		<view class="diamond-container">
			<view class="diamond diamond-1"></view>
			<view class="diamond diamond-2"></view>
			<view class="diamond diamond-3"></view>
			<view class="diamond diamond-4"></view>
		</view>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in detailList" :key="index">
				<u-cell isLink :rightIconStyle="{ 'font-size': '16px' }" @click="openFairyDetail(item.id, item.name)">
					<view slot="title" class="community">
						<view>{{ item.name }}</view>
					</view>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
import { getFairyDetailList } from '@/api/fairy'
export default {
	data() {
		return {
			id: 0,
			current: 1,
			size: 20,
			detailList: []
		}
	},
	methods: {
		fairyDetailList() {
			getFairyDetailList({
				current: this.current,
				categoryId: this.id,
				size: this.size
			}).then(res => {
				res.forEach((item, index) => {
					this.detailList.push(item);
				})
			})
		},
		openFairyDetail(detailId, detailName) {
			uni.navigateTo({
				url: "/pages/fairy/fairyDetail?id=" + detailId + "&name=" + detailName
			})
		},
		scrolltolower() {
			this.fairyDetailList();
		}
	},
	onLoad(options) {
		// options 中包含了从调用页面传递过来的所有参数
		console.log('接收到的参数：', options);
		this.id = options.id;
		uni.setNavigationBarTitle({
			title: options.name
		});
	},
	mounted() {
		this.fairyDetailList();
	}
}
</script>

<style>
view {
	background-color: blanchedalmond;
}

.u-list {
	border-top: 1px solid #d6d7d9;
	border-bottom: 1px solid #d6d7d9;
}

.diamond-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 60rpx;
	position: relative;
}

.diamond {
	width: 20rpx;
	height: 20rpx;
	background: rgba(0, 0, 255, 0.5);
	transform: rotate(45deg);
	position: static;
	animation: rotate 2s linear infinite;
	margin: 0 20rpx;
}

.diamond-1 {
	animation-delay: 0s;
}

.diamond-2 {
	animation-delay: 0.5s;
}

.diamond-3 {
	animation-delay: 1s;
}

.diamond-4 {
	animation-delay: 1.5s;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>
